<!DOCTYPE html>
<html lang="en">
<head>
    
	<meta charset="utf-8" />
	<!-- TODO change description -->
	<meta name="description" content="Company description here" />
	<!-- TODO change keywords -->
	<meta name="keywords" content="Company keywords here" />
	<!-- TODO change this meta if do not use for phone -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0;">
	<meta name="format-detection" content="telephone=no">
    <!-- TODO change title -->
	<title>Web Specialize</title>
    <link rel="icon logo" href="images/favico.png" />
    <!-- TODO marge the CSS files -->
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<link rel="stylesheet" type="text/css" href="css/reset.css" />
	<link rel="stylesheet" type="text/css" media="print" href="css/print.css" />

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type="text/javascript" src="js/script.js"></script>
    
    <!-- TODO remove this font if you do not use -->
	<!--google font--><link href='http://fonts.googleapis.com/css?family=Arimo' rel='stylesheet' type='text/css' />
    
	<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
       <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>

	<div id="wrapper">	
		<div id="main_container">
			<header>
				<div class="expand"><button></button><span>Menu</span></div>
				<nav class="main-nav">
				<ul class="left_nav">
					<li><a href="#">Home</a></li>
					<li class="current"><a href="#">Our Services</a></li>
				</ul>
				<ul class="right_nav">
					<li><a href="#">Portfolio</a></li>
					<li><a href="#">Contact Us</a></li>
				</ul>
			</nav><!-- end top-menu -->
			<figure class="logo">
				<a href="#" target="_blank"><img src="images/web-specialize-logo.png" alt="web specialize" title="web specialize"  /></a>
			</figure>
			</header>
			<section id="page-title">
				<h1>Portfolio</h1>
			</section>
            <section id="content-sub">
				<section id="content_main">
					<section class="FCE-img-one-column">
						<a href="#">
							<img alt="image" src="images/portfolio-01.jpg">
							<div class="description">
								<h3>Our History</h3>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
									sed do eiusmod tempor incididunt ut labore et dolore magna
									aliqua. Ut enim ad minim veniam, quis nostrud exercitation
									ullamco laboris</p>
							</div>
						</a>
					</section>
					<section class="FCE-img-one-column FCE-img-one-column-last">
						<a href="#">
							<img alt="image" src="images/portfolio-01.jpg">
							<div class="description">
								<h3>Our History</h3>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
									sed do eiusmod tempor incididunt ut labore et dolore magna
									aliqua. Ut enim ad minim veniam, quis nostrud exercitation
									ullamco laboris</p>
							</div>
						</a>
					</section>
					<section class="FCE-img-one-column FCE-img-one-column-last">
						<a href="#">
							<img alt="image" src="images/portfolio-01.jpg">
							<div class="description">
								<h3>Our History</h3>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
									sed do eiusmod tempor incididunt ut labore et dolore magna
									aliqua. Ut enim ad minim veniam, quis nostrud exercitation
									ullamco laboris</p>
							</div>
						</a>
					</section>
					<section class="FCE-img-one-column">
						<a href="#">
							<img alt="image" src="images/portfolio-01.jpg">
							<div class="description">
								<h3>Our History</h3>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
									sed do eiusmod tempor incididunt ut labore et dolore magna
									aliqua. Ut enim ad minim veniam, quis nostrud exercitation
									ullamco laboris</p>
							</div>
						</a>
					</section>
					<section class="FCE-img-one-column FCE-img-one-column-last">
						<a href="#">
							<img alt="image" src="images/portfolio-01.jpg">
							<div class="description">
								<h3>Our History</h3>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
									sed do eiusmod tempor incididunt ut labore et dolore magna
									aliqua. Ut enim ad minim veniam, quis nostrud exercitation
									ullamco laboris</p>
							</div>
						</a>
					</section>
					<section class="FCE-img-one-column FCE-img-one-column-last">
						<a href="#">
							<img alt="image" src="images/portfolio-01.jpg">
							<div class="description">
								<h3>Our History</h3>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
									sed do eiusmod tempor incididunt ut labore et dolore magna
									aliqua. Ut enim ad minim veniam, quis nostrud exercitation
									ullamco laboris</p>
							</div>
						</a>
					</section>
				</section>
            </section><!-- end main-content -->
        </div><!--end main container-->
		<div class="clear"></div>
	</div><!--end wrapper-->
	<footer>
			<section class="footer_container">
				<section class="footer_left">
					<p>Feel free to contact us anytime for help!<br><br>&copy;2013 by Web Specialize</h2>
				</section>
				<section class="footer_right">
					follow us:
					<a class="facebook" href="#"></a>
					<a class="twitter" href="#"></a>
					<a class="linkedin" href="#"></a>
				</section>
			</section>
		</footer><!-- end footer -->
    
    <!-- TODO JavaScript should be placed under wrapper session-->
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" href="js/script.js" ></script>
	<script>
$(".expand").click(function () {
if ($(".main-nav").is(":hidden")) {
	$(".main-nav").slideDown("slow");
} else {
	$(".main-nav").slideUp("hide");
	}
});
</script>
</body>
    
</html>
